<template>
    <div class="left">
        <!-- 第一个 -->
        <div id="one">
            <left-one></left-one>
        </div>
        <!-- 第二个 -->
        <div id="two">
            <left-two></left-two>
        </div>
        <!-- 第三个 -->
        <div id="three">
            <left-three></left-three>
        </div>
    </div>
</template>
<script setup>
import leftOne from './left/leftOne.vue'
import leftTwo from './left/leftTwo.vue'
import leftThree from './left/leftThree.vue'

components: { leftOne, leftTwo, leftThree }

</script>
<style lang="scss" scoped>
.left {
    width: 520px;
    display: flex;
    height: 980px;
    flex-wrap: wrap;

    #one {
        width: 100%;
        height: 33%;
        padding: 20px;
        // border: 1px solid skyblue;
    }

    #two {
        width: 100%;
        height: 33%;
        padding: 20px;
        // border: 1px solid skyblue;
    }

    #three {
        width: 100%;
        height: 33%;
        padding: 20px;
        // border: 1px solid skyblue;
    }
}
</style>